import React, { useState, useEffect } from 'react';
import Barcode from 'react-barcode';
import { Card, Button } from 'antd';
import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import { useLocation } from 'react-router-dom';
import './Com/My.css';

const Ma: React.FC = () => {
  const location = useLocation();
  const [barcodeValue, setBarcodeValue] = useState<string>('');
  const [displayLabel, setDisplayLabel] = useState<string>('');
  const [isZoomed, setIsZoomed] = useState(false);

  useEffect(() => {
    const state = location.state as { pickupCode?: string; phone?: string };
    if (state && state.pickupCode) {
      setBarcodeValue(state.pickupCode);
      setDisplayLabel(`提货码：${state.pickupCode}`);
    } else {
      // 从本地或用户信息获取手机号
      const phone = state?.phone || localStorage.getItem('userPhone') || '13800138000';
      setBarcodeValue(phone);
      setDisplayLabel(`手机号：${phone}`);
    }
  }, [location.state]);

  const handleZoom = () => {
    setIsZoomed(!isZoomed);
  };

  return (
    <div className="ma-container" style={{ padding: '1rem', backgroundColor: '#f5f5f5', minHeight: '100vh' }}>
      <div style={{ maxWidth: '50rem', margin: '0 auto' }}>
        <Card style={{ marginBottom: '1rem' }}>
          <div style={{ 
            textAlign: 'center', 
            padding: isZoomed ? '0.1rem' : '0.2rem',
            transform: isZoomed ? 'rotate(90deg) scale(1.3)' : 'none',
            transformOrigin: 'center center',
            transition: 'transform 0.3s ease-in-out',
            height: isZoomed ? '14rem' : 'auto',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            width: isZoomed ? '100%' : 'auto'
          }}>
            <div style={{ 
              fontSize: isZoomed ? '0.4rem' : '0.5rem', 
              color: '#333',
              marginBottom: isZoomed ? '0.2rem' : '0.5rem',
              fontWeight: isZoomed ? 'bold' : 'normal'
            }}>
              {displayLabel}
            </div>
            <div 
              style={{ 
                marginBottom: isZoomed ? '0.2rem' : '0.5rem', 
                overflow: 'hidden',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '100%',
                maxWidth: '100%'
              }}
            >
              <Barcode 
                value={barcodeValue}
                format="CODE128"
                width={isZoomed ? 5 : 0.8}
                height={isZoomed ? 100 : 35}
                displayValue={false}
                background="#ffffff"
                lineColor="#000000"
                margin={2}
              />
            </div>
            <div style={{ 
              display: 'flex', 
              justifyContent: 'center', 
              gap: isZoomed ? '0.4rem' : '1rem',
              flexDirection: isZoomed ? 'row' : 'row'
            }}>
              <Button 
                icon={isZoomed ? <ZoomOutOutlined /> : <ZoomInOutlined />} 
                onClick={handleZoom}
                style={{ 
                  fontSize: isZoomed ? '0.3rem' : '0.25rem', 
                  padding: isZoomed ? '0.15rem 0.3rem' : '0.2rem 0.6rem',
                  height: isZoomed ? '1rem' : 'auto'
                }}
              >
                {isZoomed ? '缩小' : '放大'}
              </Button>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
};

export default Ma;
